<!DOCTYPE html>
<html lang="zh-cn"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="common::head"></head>
<body>
<div th:replace="common::top"></div>
<br/>
<h2>收支情况</h2>
<form th:action="@{addMoney}" method="post" id="addForm" style="border: 3px double #000; width: 410px; margin: inherit; background-color: dimgrey;">
    <input name="orderId" type="number" th:value="${orderId}" hidden>
    <select name="type" required>
        <option value="1">收入</option>
        <option value="2">支出</option>
    </select>
    <input name="amountTmp" type="number" placeholder="金额(元)" step="0.01" required>
    <input name="occurTime" type="date" placeholder="时间" required>
    <input type="submit" value="新增">
    <br/>
    <input name="content" type="text" placeholder="明细说明" required style="width:390px;">
</form>
<table>
    <tr>
        <td>合同额:</td>
        <td colspan="5" th:text="${contractAmount}/100"></td>
    </tr>
    <tr>
        <td>总收入:</td>
        <td colspan="2" th:text="${in}/100" style="color:red"></td>
        <td>总支出:</td>
        <td colspan="2" th:text="${out}/100" style="color:green"></td>
    </tr>
    <tr>
        <td>序号</td>
        <td>收支</td>
        <td>内容</td>
        <td>金额</td>
        <td>日期</td>
        <td>记录人</td>
    </tr>
    <tbody>
    <tr th:each="item : ${moneyList}">
        <td th:text="${itemStat.index + 1}"></td>
        <td th:text="${item.type}==1?'收入':'支出'"></td>
        <td th:text="${item.content}"></td>
        <td th:text="${item.amount}/100" th:style="${item.type}==1?'color:red':'color:green'"></td>
        <td th:text="${#dates.format(item.occurTime, 'yyyy-MM-dd')}"></td>
        <td th:text="${item.createUser}"></td>
    </tr>
    </tbody>
</table>
<p>
    <a href="javascript:history.back(-1);">上一页</a>
    <a href="../index.html" th:href="@{/index.html}">主页</a>
</p>
<script>
    $("#addForm").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: $("#addForm").attr("method"),
            url: $("#addForm").attr("action"),
            data: $("#addForm").serialize(),
            success: function(response){
                alert("提交成功");
                window.location.reload();
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });
</script>
</body>
</html>